<script lang="ts" setup>
import { useI18n } from 'vue-i18n';
const i18n = useI18n({ useScope: 'global' });

// import useCommonStore from '/@/store/modules/common';
// let pinia = useCommonStore();
const { piniaCommon } = useStore();

const data = reactive({
  language: piniaCommon.$state.locale == 'zh_CN' ? true : false,
});
onMounted(() => {});

// 语言切换
const handLanuage = (e: any) => {
  data.language = e;
  piniaCommon.changeLocal(e ? 'zh_CN' : 'en_US');
  i18n.locale.value = e ? 'zh_CN' : 'en_US';
};
const handLanuage2 = () => {
  data.language = !data.language;
  piniaCommon.changeLocal(data.language ? 'zh_CN' : 'en_US');
  i18n.locale.value = data.language ? 'zh_CN' : 'en_US';
};
// 多窗口监听 监听storage 改变其他窗口主题，语言变化
window.addEventListener('storage', function (e) {
  if (e.key === 'common') {
    let storage = JSON.parse(e.newValue || '{}');
    // 语言
    data.language = storage.locale === 'zh_CN' ? true : false;
  }
});
</script>

<template>
  <!-- <div pt-5>
    <div v-if="data.language" class="cursor-pointer" @click="handLanuage2">
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 32 24">
        <g fill="none" fill-rule="evenodd" clip-rule="evenodd">
          <path fill="#E31D1C" d="M0 0h32v24H0z" />
          <path
            fill="#FECA00"
            d="m15.016 4.548l-1.01.61l.23-1.19l-.841-.89l1.139-.049l.482-1.11l.482 1.11h1.137l-.84.94l.253 1.19zM7.018 9.607l-2.881 1.551l.657-3.026l-2.4-2.265l3.25-.123l1.374-2.826l1.374 2.826h3.243L9.24 8.132l.72 3.026zm9.998-1.059l-1.01.61l.23-1.19l-.841-.89l1.139-.049l.482-1.11l.482 1.11h1.137l-.84.94l.253 1.19zm-1 4l-1.01.61l.23-1.19l-.841-.89l1.139-.049l.482-1.11l.482 1.11h1.137l-.84.94l.253 1.19zm-3 3l-1.01.61l.23-1.19l-.841-.89l1.139-.049l.482-1.11l.482 1.11h1.137l-.84.94l.253 1.19z"
          />
        </g>
      </svg>
    </div>

    <div v-else cursor-pointer @click="handLanuage2">
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 32 24">
        <g fill="none">
          <path fill="#F7FCFF" fill-rule="evenodd" d="M0 0h32v24H0z" clip-rule="evenodd" />
          <path
            fill="#E31D1C"
            fill-rule="evenodd"
            d="M0 14.667v2h32v-2zm0 3.666v2h32v-2zm0-11v2h32v-2zM0 22v2h32v-2zm0-11v2h32v-2zM0 0v2h32V0zm0 3.667v2h32v-2z"
            clip-rule="evenodd"
          />
          <path fill="#2E42A5" d="M0 0h20v13H0z" />
          <path
            fill="#F7FCFF"
            fill-rule="evenodd"
            d="m1.722 2.939l-.726.509l.245-.906l-.645-.574h.843l.282-.74l.331.74h.718l-.564.574l.218.906zm4 0l-.726.509l.245-.906l-.644-.574h.842l.282-.74l.331.74h.718l-.564.574l.218.906zm3.274.509l.726-.51l.702.51l-.218-.906l.564-.574h-.718l-.331-.74l-.282.74h-.842l.644.574zm4.726-.51l-.726.51l.245-.906l-.644-.574h.842l.282-.74l.331.74h.718l-.564.574l.218.906zM.996 7.449l.726-.51l.702.51l-.218-.906l.564-.574h-.718l-.331-.74l-.282.74H.596l.645.574zm4.726-.51l-.726.51l.245-.906l-.644-.574h.842l.282-.74l.331.74h.718l-.564.574l.218.906zm3.274.51l.726-.51l.702.51l-.218-.906l.564-.574h-.718l-.331-.74l-.282.74h-.842l.644.574zm4.726-.51l-.726.51l.245-.906l-.644-.574h.842l.282-.74l.331.74h.718l-.564.574l.218.906zM.996 11.449l.726-.51l.702.51l-.218-.906l.564-.574h-.718l-.331-.74l-.282.74H.596l.645.574zm4.726-.51l-.726.51l.245-.906l-.644-.574h.842l.282-.74l.331.74h.718l-.564.574l.218.906zm3.274.51l.726-.51l.702.51l-.218-.906l.564-.574h-.718l-.331-.74l-.282.74h-.842l.644.574zm4.726-.51l-.726.51l.245-.906l-.644-.574h.842l.282-.74l.331.74h.718l-.564.574l.218.906zm3.274-7.49l.726-.51l.702.51l-.218-.906l.564-.574h-.718l-.331-.74l-.282.74h-.843l.645.574zm.726 3.49l-.726.51l.245-.906l-.645-.574h.843l.282-.74l.331.74h.718l-.564.574l.218.906zm-.726 4.51l.726-.51l.702.51l-.218-.906l.564-.574h-.718l-.331-.74l-.282.74h-.843l.645.574zM3.722 4.938l-.726.51l.245-.906l-.645-.574h.843l.282-.74l.331.74h.718l-.564.574l.218.906zm3.274.51l.726-.51l.702.51l-.218-.906l.564-.574h-.718l-.331-.74l-.282.74h-.843l.645.574zm4.726-.51l-.726.51l.245-.906l-.644-.574h.842l.282-.74l.331.74h.718l-.564.574l.218.906zm-8.726 4.51l.726-.51l.702.51l-.218-.906l.564-.574h-.718l-.331-.74l-.282.74h-.843l.645.574zm4.726-.51l-.726.51l.245-.906l-.644-.574h.842l.282-.74l.331.74h.718l-.564.574l.218.906zm3.274.51l.726-.51l.702.51l-.218-.906l.564-.574h-.718l-.331-.74l-.282.74h-.842l.644.574zm4.726-4.51l-.726.51l.245-.906l-.644-.574h.842l.282-.74l.331.74h.718l-.564.574l.218.906zm-.726 4.51l.726-.51l.702.51l-.218-.906l.564-.574h-.718l-.331-.74l-.282.74h-.842l.644.574z"
            clip-rule="evenodd"
          />
        </g>
      </svg>
    </div>
  </div> -->
  <!-- <a-switch v-model:checked="data.language" checked-children="中文" un-checked-children="英文" @change="handLanuage" /> -->

  <a-dropdown placement="bottomRight">
    <span class="i-carbon-translate w-px-30 h-px-30"></span>
    <template #overlay>
      <a-menu>
        <a-menu-item class="locale-menu-item">
          <a class="locale-item" href="javascript:;" @click="handLanuage(true)">中文</a>
        </a-menu-item>
        <a-menu-item class="locale-menu-item">
          <a class="locale-item" href="javascript:;" @click="handLanuage(false)">English</a>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<style lang="less" scoped>
.ad {
  cursor: pointer;
}
</style>
